<template>
	<view class="page">
		<!-- 头部 -->
		<view class="header ex-mall-header" @touchmove.stop.prevent>
			<!-- #ifdef MP-WEIXIN -->
			<view class="ex-mall-header-mp-weixin-fill" :class="[$themeClass('header-title-color')]">商品详情</view>
			<!-- #endif -->
			<view class="header-background" :class="[$themeClass('header-bg-color')]" :style="{opacity: headerOpacity}"></view>
			<view class="ex-mall-header-content">
				<view class="ex-mall-header-left">
					<view class="ex-mall-header-btn" @click="$util.navigateBack" :class="[$themeClass('header-btn-left-another-bg-color')]">
						<text class="ex-mall-header-btn-icon ri-arrow-left-s-line" :class="[$themeClass('header-btn-left-icon-another-color')]"></text>
					</view>
				</view>
				<view class="ex-mall-header-title" :class="[$themeClass('header-title-color')]" :style="{opacity: headerOpacity}">商品详情</view>
				<view class="ex-mall-header-right">
					<view class="cart ex-mall-header-btn" :class="[$themeClass('search-btn-bg-color')]" @click="$switchTab('shoppingcart')">
						<text v-if="shoppingCartTotal === 0" class="ex-mall-header-btn-icon ri-shopping-cart-line" :class="[$themeClass('search-btn-color')]"></text>
						<text v-else class="ex-mall-header-btn-text" :class="[$themeClass('search-btn-color')]">{{shoppingCartTotal>99?'99+':shoppingCartTotal}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="pictures" :style="{top: `${pictureTop}px`}">
			<swiper class="swiper" indicator-dots circular>
				<swiper-item class="swiper-item" v-for="(x, xi) in goods.pictures" :key="xi">
					<view class="picture">
						<image class="img" :src="x.url" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="btns">
				<view class="btn favorite">
					<text class="icon ri-bookmark-line"></text>
				</view>
				<view class="btn share">
					<text class="icon ri-share-forward-line"></text>
				</view>
			</view>
		</view>

		<view class="content" :class="[$themeClass('goods-content-bg-color')]">
			<view class="title" :class="[$themeClass('goods-title-color')]">Calvin Klein</view>
			<view class="price" :class="[$themeClass('goods-price-color')]">￥236</view>
			<view class="desc" :class="[$themeClass('goods-desc-color')]">时尚休闲女士运动鞋</view>
			<view class="property">
				<view class="property-item">
					<view class="title" :class="[$themeClass('goods-title-color')]">选择颜色</view>
					<view class="option">
						<view class="option-item" :class="[$themeClass('goods-property-option-active')]">白色</view>
						<view class="option-item">黑色</view>
						<view class="option-item">灰色</view>
					</view>
				</view>
				<view class="property-item">
					<view class="title" :class="[$themeClass('goods-title-color')]">选择尺码</view>
					<view class="option">
						<view class="option-item">36</view>
						<view class="option-item">37</view>
						<view class="option-item">38</view>
						<view class="option-item" :class="[$themeClass('goods-property-option-active')]">39</view>
						<view class="option-item">40</view>
						<view class="option-item">41</view>
						<view class="option-item">42</view>
					</view>
				</view>
			</view>
			<view class="details">
				<view class="title" :class="[$themeClass('goods-title-color')]">图文详情</view>
				<view class="content" v-for="(x, xi) in goods.details" :key="xi">
					<image class="img" v-if="x.type === 'image'" :src="x.url" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<view class="footer">
			<view class="btns">
				<view class="btn spec" @click="scrollSpec">
					<text>选择规格</text>
					<text class="icon ri-arrow-right-s-fill"></text>
				</view>
				<view class="btn buy" @click="addCart" :class="[$themeClass('search-btn-bg-color'), $themeClass('search-btn-color')]">
					<text>加入购物车</text>
				</view>
			</view>
		</view>

		<view class="cart-ball" :class="[$themeClass('search-btn-bg-color'), shoppingCartBallShow&&'show']" :style="{top: `${shoppingCartBall.y-10}px`, left: `${shoppingCartBall.x-10}px`}"></view>
	</view>
</template>

<script>
	var transparentHeight = uni.getSystemInfoSync().windowWidth
	export default {
		data() {
			return {
				headerOpacity: 0,
				pictureTop: 0,
				shoppingCartBall: {},
				shoppingCartBallShow: false,
				shoppingCartBallMoving: false,
				shoppingCartTotal: 0,
				goods: {
					pictures: [{
						url: '/static/goods/1.jpg'
					}, {
						url: ''
					}, {
						url: ''
					}],
					details: [{
						type: 'image',
						url: '/static/goods/1.jpg'
					}, {
						type: 'image',
						url: '/static/goods/1.jpg'
					}, {
						type: 'image',
						url: '/static/goods/1.jpg'
					}]
				}
			}
		},
		onPageScroll(e) {
			var scrollTop = e.scrollTop <= 0 ? 0 : e.scrollTop
			var opacityCoefficient = scrollTop / transparentHeight
			var opacity = opacityCoefficient > 1 ? 1 : opacityCoefficient
			this.headerOpacity = opacity
			this.pictureTop = -scrollTop / 4
		},
		methods: {
			scrollSpec() {
				uni.createSelectorQuery().select(".page").boundingClientRect(page => {
					uni.createSelectorQuery().select(".header").boundingClientRect(header => { //目标节点
						uni.createSelectorQuery().select(".content > .property").boundingClientRect(property => {
							uni.pageScrollTo({
								duration: 150,
								scrollTop: property.top - page.top - header.height
							})
						}).exec()
					}).exec()
				}).exec()
			},
			addCart(e) {
				if (this.shoppingCartBallMoving) return

				this.shoppingCartBallMoving = true
				this.shoppingCartBall = {
					x: e.detail.x,
					y: e.detail.y
				}
				this.shoppingCartBallShow = true
				uni.createSelectorQuery().select(".ex-mall-header-btn.cart").boundingClientRect(data => {
					setTimeout(() => {
						this.shoppingCartBall = {
							x: data.left + data.width / 2,
							y: data.top + data.height / 2
						}
					}, 10)
					setTimeout(() => {
						this.shoppingCartBallShow = false
						this.shoppingCartBallMoving = false
						this.shoppingCartTotal++
					}, 590)
				}).exec()
			}
		}
	}
</script>

<style lang="scss">
	.page {
		&>.header {
			.header-background {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: -1;
			}
		}

		&>.pictures {
			position: sticky;
			top: 0;
			z-index: 0;
			/* #ifndef MP-WEIXIN */
			margin-top: calc(-70px - var(--status-bar-height));
			/* #endif */
			/* #ifdef MP-WEIXIN */
			margin-top: calc(-70px - var(--status-bar-height) - 50px);
			/* #endif */
			width: 100vw;
			height: 118vw;

			&>.swiper {
				width: 100%;
				height: 100%;

				.swiper-item {
					&:nth-child(3n-2) {
						.picture {
							&>.img {
								background-color: #5A9494;
							}
						}
					}

					&:nth-child(3n-1) {
						.picture {
							&>.img {
								background-color: #9B927D;
							}
						}
					}

					&:nth-child(3n) {
						.picture {
							&>.img {
								background-color: #96824C;
							}
						}
					}
				}

				.picture {
					width: 100%;
					height: 100%;

					&>.img {
						display: block;
						width: 100%;
						height: 100%;
					}
				}
			}

			&>.btns {
				position: absolute;
				/* #ifndef MP-WEIXIN */
				top: calc(70px + var(--status-bar-height));
				/* #endif */
				/* #ifdef MP-WEIXIN */
				top: calc(70px + var(--status-bar-height) + 50px);
				/* #endif */
				right: 28px;
				display: flex;
				flex-direction: column;

				&>.btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 38px;
					height: 38px;
					margin-bottom: 16px;
					border-radius: 12px;
					overflow: hidden;

					&>.icon {
						font-size: 18px;
					}

					&.favorite {
						background-color: #FFFFFF;

						&>.icon {
							color: #292929;
						}
					}

					&.share {
						background-color: #CFCFCF;

						&>.icon {
							color: #FFFFFF;
						}
					}
				}
			}
		}

		&>.content {
			position: relative;
			z-index: 1;
			margin-top: -34px;
			padding: 0 28px calc(54px + 18px + 18px + (env(safe-area-inset-bottom) / 2)) 28px;
			border-radius: 34px 34px 0 0;

			&>.title {
				padding-top: 34px;
				font-size: 23px;
				font-weight: 600;
			}

			&>.price {
				margin-top: 24px;
				font-size: 15px;
				font-weight: 600;
			}

			&>.desc {
				margin-top: 18px;
				font-size: 13px;
			}

			&>.property {
				&>.property-item {
					margin-top: 36px;

					&>.title {
						font-size: 14px;
						font-weight: 600;
					}

					&>.option {
						display: flex;
						flex-wrap: wrap;

						&>.option-item {
							display: inline-flex;
							justify-content: center;
							align-items: center;
							min-width: 54px;
							margin: 12px 12px 0 0;
							padding: 12px 14px;
							line-height: 1.3;
							font-size: 13px;
							background-color: #F7F7F7;
							box-sizing: border-box;
							border-radius: 12px;
						}
					}
				}
			}

			&>.details {
				width: 100%;
				margin-top: 36px;

				&>.title {
					margin-bottom: 12px;
					font-size: 14px;
					font-weight: 600;
				}

				&>.content {
					width: 100%;

					.img {
						display: block;
						width: 100%;
					}
				}
			}
		}

		&>.footer {
			position: fixed;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 2;
			padding: 18px 28px calc(18px + (env(safe-area-inset-bottom) / 2)) 28px;
			background-color: #FFFFFF;
			border-radius: 34px 34px 0 0;
			overflow: hidden;

			&>.btns {
				display: flex;

				&>.btn {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 54px;
					font-size: 13px;
					font-weight: 600;
					border-radius: 12px;

					&.spec {
						flex: 0.4;
						border: 1px solid #292929;
						box-sizing: border-box;

						&>.icon {
							font-size: 16px;
						}
					}

					&.buy {
						flex: 0.6;
						margin-left: 10px;
					}
				}
			}
		}

		.cart-ball {
			position: fixed;
			z-index: 300;
			display: none;
			width: 20px;
			height: 20px;
			border-radius: 100%;
			transition: all 0.5s;
			box-shadow: 0 4px 8px #4D4D4D;

			&.show {
				display: block;
			}
		}
	}
</style>
